<template>
    <div class="mask">
      <div class="login">
          <h3>叩丁狼商品管理系统</h3>
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              status-icon
              :rules="rules"
           
              class="demo-ruleForm"
          >
              <el-form-item  prop="username">
              <el-input v-model="ruleForm.username" type="text" autocomplete="off"  :prefix-icon="Avatar" placeholder="请输入账号"/>
              </el-form-item>
              <el-form-item  prop="password">
              <el-input
                  v-model="ruleForm.password"
                  type="password"
                  autocomplete="off"
                  :prefix-icon="Lock"
                  placeholder="请输入密码"
              />
              </el-form-item>
  
              <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)"
                  >登录</el-button
              >
              </el-form-item>
          </el-form>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
      import { reactive, ref } from 'vue'
      import type { FormInstance } from 'element-plus'
      import { Calendar, Search ,Avatar,Lock} from '@element-plus/icons-vue'
      import { ElMessage } from 'element-plus'
      import {useRouter} from "vue-router"
      import {LoginAPI}from "./api/index"
  
      const ruleFormRef = ref<FormInstance>()
      const router = useRouter()
      const checkAge = (rule: any, value: any, callback: any) => {
      if (!value) {
          return callback(new Error('Please input the age'))
      }
      setTimeout(() => {
          if (!Number.isInteger(value)) {
          callback(new Error('Please input digits'))
          } else {
          if (value < 18) {
              callback(new Error('Age must be greater than 18'))
          } else {
              callback()
          }
          }
      }, 1000)
      }
  
      const validatePass = (rule: any, value: any, callback: any) => {
      if (value === '') {
          callback(new Error('请输入正确的账号'))
      } else {
          if (ruleForm.password !== '') {
          if (!ruleFormRef.value) return
          ruleFormRef.value.validateField('checkPass', () => null)
          }
          callback()
      }
      }
      const validatePass2 = (rule: any, value: string, callback: any) => {
      if (value === '') {
          callback(new Error('请输入正确的密码'))
      }  else {
          callback()
      }
      }
  
      const ruleForm = reactive({
      username: '',
      password: '',
      })
  
      const rules = reactive({
      username: [{ validator: validatePass, trigger: 'blur' }],
      password: [{ validator: validatePass2, trigger: 'blur' }],
      })
  
      const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
          if (valid) {
          console.log('submit!')
  
          LoginAPI(ruleForm).then((res)=>{
              if(res.code===200){
                  // 存token
                  localStorage.setItem("token",res.data.tokenHead+res.data.token)
  
                  // 路由跳转
                  router.push("/")
                  
                  // 提示信息
                  ElMessage({
                      message: '登录成功',
                      type: 'success',
                  })
              }
          })
         
          } else {
          console.log('error submit!')
          ElMessage.error("请填写正确的信息")
          return false
          }
      })
      }
  
      const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
      }
  
  </script>
  
  <style lang="less" scoped>
  
  .mask{
      width: 100%;
      height: 100%;
      background-color: #2d3a4b;
      overflow: hidden;
      .login{
          width: 500px;
          margin:200px auto 0;
          // border: 1px solid #000;
          h3{
              margin: auto;
              text-align: center;
              padding: 20px 0;
              color: white;
          }
          :deep(.el-button--primary){
              width: 100%;
              height: 40px;
          }
          :deep(.el-input__inner){
              height: 50px;
  
          }
      }
  }
  </style>